<template>
  <MainSlot>
    <template v-slot:searchForm>
      <SearchForm :searchList="searchList" @querySearchForm="querySearchForm"></SearchForm>
    </template>
    <template v-slot:btnList>
      <BtnSlot :btnList="btnList" @handleClick="handleClick"></BtnSlot>
    </template>
    <template v-slot:content>
      <TableSlot ref="taskTable" :configFlag="{ needPage: true }" :pageValue="pageValue" @sizeChange="handleSizeChange"
        @handleChange="handlePageChange">
        <template v-slot:table>
          <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit
            highlight-current-row height="100%">
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                {{ getTableItemIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column label="工时消耗日期" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.date || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.project || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="任务名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.name || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="人员" align="center">
              <template slot-scope="scope">
                {{ scope.row.realName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="工时" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.consumed || '--' }}h
              </template>
            </el-table-column>
          </el-table>
        </template>
      </TableSlot>
    </template>
  </MainSlot>
</template>

<script>

import SearchForm from "@/components/SearchForm"
import MainSlot from "@/components/MainSlot"
import BtnSlot from "@/components/BtnSlot"
import TableSlot from "@/components/CustomizeTableSlot"
import tableApi from "@/api/table.js"
export default {
  components: { MainSlot, BtnSlot, TableSlot, SearchForm },
  data() {
    return {
      tableData: [],
      searchFormData: {},
      searchList: [
        {
          label: '任务名称',
          falg: 'input',
          key: 'name',
          defaultData: null
        },
        {
          label: '人员',
          falg: 'users',
          key: 'realName',
          defaultData: null
        },
        {
          label: '选择时间',
          falg: 'daterange',
          key: 'dataList',
          defaultData: null
        },
      ],
      listLoading: false,
      btnList: [
        { name: '重置', flag: 'reset', icon: 'el-icon-refresh-right' },
        { name: '导出', flag: 'download', icon: 'el-icon-download' },
      ],
      pageValue: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        pageLayout: "total,sizes,prev,pager,next,jumper"
      },
      selectList: [], // 表格选中数据
    }
  },
  created() {
    this.queryTableList();
  },
  methods: {
    querySearchForm(e) {
      this.pageValue.pageNum = 1;
      this.pageValue.pageSize = 20;
      console.log(e)
      let dataList = e.dataList
      this.searchFormData = {
        ...e,
        endTime: dataList ? dataList[1] || '' : '',
        startTime: dataList ? dataList[0] || '' : ''
      }
      this.queryTableList();
    },
    async queryTableList() {
      let { pageSize, pageNum } = this.pageValue;
      let params = {
        page: pageNum,
        size: pageSize,
        entity: { ...this.searchFormData }
      }
      this.listLoading = true;
      this.tableData = []
      let res = await tableApi.effortsList(params);
      this.listLoading = false;
      let data = res.data;
      let { total } = data
      this.pageValue.total = total || 10;
      this.tableData = data.list
    },
    async exportTable() {
      let response = await tableApi.effortsExport({ ...this.searchFormData })
      this.$downFile(response, '工时表')
    },
    handleClick(flag) {
      if (flag == 'download') {
        this.exportTable()
      } else if (flag == 'reset') {
        this.queryTableList();
      }
    },
    // 表格分页-页容改变
    handleSizeChange(e) {
      this.pageValue.pageSize = e;
      this.pageValue.pageNum = 1;
      this.queryTableList();
    },
    // 表格分页-页数改变
    handlePageChange(e) {
      this.pageValue.pageNum = e;
      this.queryTableList();
    },
    //获取index
    getTableItemIndex(index) {
      let { pageSize, pageNum } = this.pageValue;
      return index + 1 + ((pageNum - 1) * pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table thead.is-group th {
  background-color: transparent;
}
</style>
